<template>
  <el-cascader ref="cascaderRef"
               popper-class="popperStyle"
               v-model="cascader"
               :options="personnelOptions"
               :props="cascaderProps"
               :show-all-levels="false"
               filterable
               clearable
               :debounce="500"
               :placeholder="props.placeholder"
               collapse-tags
               collapse-tags-tooltip
               :filter-method="filterMethod"
               @change="change"/>
</template>
<script setup>
import {reactive, ref} from "vue";
import useCommonStore from "@/store/modules/common";

const commonStore = useCommonStore();
const personnelOptions = computed(() => {
  if (!commonStore.personnelOptions) {
    commonStore.getOrganization()
  }
  return commonStore.personnelOptions
});
const props = defineProps({
  modelValue: [String, Number, Array],
  placeholder: {
    type: String,
    default: '请选择',
  },
  multiple: {
    type: Boolean,
    default: false
  }
});

const cascaderProps = reactive({
  emitPath: false,
  multiple: props.multiple,
  label: 'name',
  value: 'user_id',
  children: 'sub',
})

const filterMethod = (node, val) => {
  if (!!~node.text.indexOf(val) || !!~node.text.toUpperCase().indexOf(val.toUpperCase())) {
    return true
  }
}

const cascader = ref()
watch(() => props.modelValue, (val) => {
  cascader.value = val
}, {deep: true, immediate: true})

const emit = defineEmits(['update:modelValue', 'change'])

const cascaderRef = ref()
const change = (val) => {
  if (props.multiple) {
    const filterData = val.filter(v => {
      if (v) return v
    })
    const checked = cascaderRef.value.getCheckedNodes()
    emit('change', checked)
    emit('update:modelValue', filterData)
  } else {
    const checked = cascaderRef.value.getCheckedNodes()
    emit('change', checked)
    emit('update:modelValue', val)
  }
  
}

</script>

<style lang="scss">
//.el-cascader__tags {
//  z-index: 2;
//}
</style>